page-member-details {
  //头部
  ion-header {
    //取消全局的 顶部box-shadow
    box-shadow: none !important;
    ion-navbar {
      @extend %toolbarBackground;
      padding-bottom: 1.7rem !important;
      //icon 按钮
      ion-buttons {
        & > button {
          height: 3.25rem !important;
        }
        @extend %spanButtonInner;
        &:first-of-type {
          margin-left: 1.5rem;
        }
        &:last-of-type {
          margin-right: 1.2rem;
        }
        .button-inner {
          margin-top: 0.5rem !important;
        }
      }

      //标题
      @extend %ionTitle;
    }
  }

  ion-content {
    text-align: center;
    //背景
    .bgImg {
      width: 34.3rem;
      height: 32.3rem;
      border-radius: 0.5rem;
    }
    img ~ div {
      margin-top: -5.5rem;
    }

    //成员头像
    div {
      margin-top: 5rem;
      ion-avatar {
        position: absolute;
        top: 21.7rem;
        left: 6rem;
        z-index: 8;
        img {
          width: 7rem;
          height: 7rem;
          margin: 0 auto;
          border-radius: 1rem;
          background: #fff; 
          box-shadow: 0 .1rem .5rem .1rem rgba($color: #98bde6, $alpha: 0.3);
        }
      }

      //头像信息
      ion-avatar + div {
        position: absolute;
        top: 25.3rem;
        left: 50%;

        width: 30rem;
        height: 14rem;
        margin-top: 0;
        margin-left: -15rem;
        border-radius: 0.5rem;
        background: #fff;
        box-shadow: 0px 5px 10px rgba($color: #98bde6, $alpha: 0.25);
      }
      //底部的装饰和中间的分割线
      ion-avatar + div::before {
        position: absolute;
        left: 0;
        width: 10.3rem;
        height: 8rem;
        margin-top: 3rem;
        border-right: 0.1rem dashed rgb(216, 216, 216);
        content: "";
      }
      ion-avatar + div::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.8rem;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        background: linear-gradient(to right, #7c7bf8, #5aa9fc);
        content: "";
      }
      //头像信息主要內容
      p {
        margin: 1.5rem 0 0 12.2rem;
        text-align: left;
        &:first-of-type {
          margin-top: 2.2rem;
        }
        img {
          width: 1.6rem;
          height: 1.6rem;
          //垂直对齐方式
          vertical-align: text-top;
        }
        span {
          margin-left: 1rem;
          font-size: 1.6rem;
        }
      }
      ion-icon {
        color: rgb(151, 151, 151);
      }
    }
  }
}
